<template>
  <el-drawer v-model="visible" destroy-on-close @closed="onClosed">
    <span>This is a message</span>

    <template #footer>
      <div style="flex: auto">
        <el-button @click="okClick"> 确定 </el-button>
        <el-button @click="cancelClick"> 取消 </el-button>
      </div>
    </template>
  </el-drawer>
</template>

<script lang="ts" setup>
import { onUnmounted, ref } from 'vue'

const visible = ref(true)
const emit = defineEmits(['ok', 'cancel'])

const onClosed = () => {
  console.log('closed in dialog')
}

const okClick = () => {
  emit('ok')
  visible.value = false
}

const cancelClick = () => {
  emit('cancel')
  visible.value = false
}

onUnmounted(() => {
  console.log('unmounted in dialog')
})
</script>
